<script type="text/html" template lay-done="layui.data.prePoupDone(d);">
    <!-- <div id="task-other-form"  class="layui-tab layui-tab-card preForm-content layui-form" lay-filter='custom-tabSwitch'>
        <table id="custom-preview-table" lay-filter="preview-table-filter"></table>
    </div> -->
    <div class="layui-card-body" style="padding: 0 15px;">
        <div id="task-other-form" class="layui-tab layui-form preForm-content" lay-filter='custom-tabSwitch'></div>
    </div>
</script>

<!-- 常驻任务和临时任务表格 -->
<script type="text/html" id="viewTaskTable">
    {{# if(d && d.length >0) { }}
    <ul class="layui-tab-title">
        {{# layui.each(d, function(index, item){ 
            var showThis = item.showThis ? 'layui-this' : '';
        }}
            <li class="{{showThis}}">{{item.formname}}</li>
        {{# }); }}
    </ul>
    <div class="layui-tab-content">
        {{# layui.each(d, function(index, item){ 
            var showThis = item.showThis ? 'layui-show' : '';
        }}
            <div class="layui-tab-item {{showThis}}">
                <table class="layui-table">
                    <thead>
                        {{# if(item.cols && item.cols.length > 0){ }}
                            {{# layui.each(item.cols, function(index, col){ }}
                                <tr>
                                    {{# layui.each(col, function(cndex, ctem){ }}
                                        <th colspan="{{ctem.colspan ? ctem.colspan : '1'}}" rowspan="{{ctem.rowspan ? ctem.rowspan : '1'}}">{{ctem.title}}</th>
                                    {{# }) }}
                                </tr>
                            {{# }) }}
                        {{# } }}
                        
                    </thead>
                    <tbody>
                        {{# if(item.data.grid && item.data.grid.length > 0) {
                            layui.each(item.data.grid,function(gdex,gtem) { }}
                                <tr>
                                    {{# layui.each(item.form_field,function(hdex,htem) { }}
                                        <td>{{gtem[htem.fieldenglish]}}</td>
                                    {{# }) }}
                                </tr>
                        {{# 
                            })
                            }else {
                        }}
                        {{# var count = 0;if(item.cols){ }}
                            {{# layui.each(item.cols[0], function(i, col){
                                col.colspan ? count += parseInt(col.colspan) : count += 1;
                            }) }}
                        {{# } }}
                        <tr>
                            <td colspan="{{count}}" style="text-align: center;">暂无数据</td>
                        </tr>
                        {{#
                            }
                        }}
                    </tbody>
                </table>
            </div>
        {{# }) }}
    </div>
    {{# } else{ }}
        <div style="width: 100%;text-align: center;">暂无填报表单</div>
    {{# } }}
</script>

<style>
    .preForm-content .layui-table tr th{
        white-space: nowrap;
        text-align: center;
    }
    .layui-tab-content{
        overflow-x: auto;
        padding: 10px 0;
    }
</style>

<!-- 填报表单工具栏 -->
<script type="text/html" id="toolbar">
    <a class="layui-icon layui-icon-add-1 my-table-btn-add" lay-event="addLine" lay-tips="新增"></a>
    <a class="layui-icon layui-icon-delete my-table-btn-del" lay-event="delLine" lay-tips="删除"></a>
</script>
<script>
    layui.data.prePoupDone = function(d){
        layui.use(['admin', 'table', 'element', 'tools', 'laytpl', 'form'], function(){
            var admin = layui.admin,
                table = layui.table, 
                element = layui.element,
                tools = layui.tools,
                laytpl = layui.laytpl,
                form = layui.form;
            
            var cols = d.params.cols,   
                formname = d.params.formname;

            form.render(null, 'custom-tabSwitch');
            getPreviewForm(cols);

            //预览表单加载
            function getPreviewForm(cols){
                admin.req({
                    url: 'myapi/DC/api/rest/web/custom/GridePreview',
                    type: 'post',
                    data: {
                        cols: JSON.stringify(cols)
                    },
                    done: function(res){
                        if(res.retcode == '0'){
                            var supContent = res.data.supcontent;
                            if(!$.isEmptyObject(supContent)){ cols = loadSelect(cols, supContent); } 
                            layui.each(cols, function(cndex, col){
                                cndex === 0 && col.unshift({field: 'statename', title: '填报状态', rowspan: cols.length });
                            });
                            var data = [{ formname:formname,cols:cols,showThis:true,data:{grid:[]} }];
                            var getTpl = viewTaskTable.innerHTML,
                                viewHtml = document.getElementById('task-other-form');
                            laytpl(getTpl).render(data, function(html){
                                viewHtml.innerHTML = html;
                            });
                        }
                    }
                })
            }   

            //加载下拉框
            function loadSelect(cols, supContent){
                layui.each(cols[cols.length-1], function(index, col){
                    for(var key in supContent){
                        if(col.field == key){
                            var fieldData = supContent[key];
                            col.templet = function(d){
                                var html = '<select lay-ignore><option value="">请选择数据</option>';
                                    if(fieldData && fieldData.length > 0){ 
                                        layui.each(fieldData, function(index, item){ 
                                            html += '<option value="'+item.code+'">'+item.text+'</option>';
                                        }) 
                                    } 
                                html += '</select>';
                            return html;
                            } 
                        };
                    }
                })
                return cols;
            }

            //监听工具栏事件
            table.on('tool(preview-table-filter)', function(obj){
                var event = obj.event,
                    data = table.cache['custom-preview-table'];
                switch(event){
                    case 'addLine':
                        var newData = data,
                            obj = {};
                        for(var key in data[0]){
                            obj[key] = '';
                        }
                        newData.push(obj);
                        table.reload('custom-preview-table', {
                            data: newData
                        });
                        layer.closeAll('tips');
                        break;
                    case 'delLine':
                        var trndex = obj.tr.data('index');
                        if(data && data.length == 1){
                            layer.msg('表格最后一行无法删除', {time: 1500});
                            return ;
                        }
                        layer.confirm('确认删除？', function(index){
                            data.splice(trndex, 1);
                            table.reload('custom-preview-table', {
                                data: data
                            });
                            layer.close(index);
                            layer.closeAll('tips');
                        })
                        break;
                    default:
                        break;
                }
            })
        })
    }
</script>